<template>
  <div style="height: 100vh; width: 100vw;">
    <a-layout style="height: 100%;">
      <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
        <div class="logo">
          <h3 style="color: white; text-align: center; margin: 16px 0;">酒店管理系统</h3>
        </div>
        <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" @click="handleMenuClick">
          <!-- 超级管理员专用菜单 -->
          <template v-if="canAccessUserManagement">
            <a-menu-item key="users">
              <user-outlined />
              <span>用户管理</span>
            </a-menu-item>
            <a-menu-item key="roles">
              <team-outlined />
              <span>角色展示</span>
            </a-menu-item>
            <a-menu-item key="permissions">
              <safety-outlined />
              <span>权限展示</span>
            </a-menu-item>
            <a-menu-item key="user-roles">
              <user-switch-outlined />
              <span>用户角色管理</span>
            </a-menu-item>
            <a-menu-item key="role-permissions">
              <key-outlined />
              <span>角色权限管理</span>
            </a-menu-item>
          </template>
          
          <!-- 所有管理员都可以访问的菜单 -->
          <a-menu-item key="public/profile">
            <user-outlined />
            <span>我的信息</span>
          </a-menu-item>
          <a-menu-item key="public/orders">
            <user-switch-outlined />
            <span>订单管理</span>
          </a-menu-item>
          <a-menu-item key="hotels" v-permission="'hotel:manage'">
            <safety-outlined />
            <span>酒店管理</span>
          </a-menu-item>
          <a-menu-item key="rooms" v-permission="'room:search'">
            <key-outlined />
            <span>房间管理</span>
          </a-menu-item>
          <a-menu-item key="reviews">
            <safety-outlined />
            <span>评价管理</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0 16px; display: flex; justify-content: space-between; align-items: center;">
          <div style="display: flex; align-items: center;">
            <menu-unfold-outlined
                v-if="collapsed"
                class="trigger"
                @click="() => (collapsed = !collapsed)"
            />
            <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
          </div>
          <div style="display: flex; align-items: center;">
            <a-button size="small" type="default" style="margin-right: 12px;" @click="goFrontend">去前台</a-button>
            <span style="margin-right: 16px;">
              欢迎，{{ currentUser?.realName || currentUser?.username || '管理员' }}
              <span style="font-size: 12px; color: #666; margin-left: 8px;">
                ({{ isSuperAdmin ? '超级管理员' : '普通管理员' }})
              </span>
            </span>
            <a-button type="link" @click="logout">退出登录</a-button>
          </div>
        </a-layout-header>
        <a-layout-content
            :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
        >
          <router-view />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import {
  UserOutlined,
  TeamOutlined,
  SafetyOutlined,
  UserSwitchOutlined,
  KeyOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons-vue';
import PermissionUtil from '@/utils/permission';

const router = useRouter();
const route = useRoute();

const collapsed = ref(false);
const selectedKeys = ref(['users']);
const currentUser = ref(null);

// 权限检查计算属性
const canAccessUserManagement = computed(() => {
  return PermissionUtil.canAccessUserManagement();
});

const isSuperAdmin = computed(() => {
  return PermissionUtil.isSuperAdmin();
});

// 菜单点击
const handleMenuClick = ({ key }) => {
  router.push(`/hotel/${key}`);
};

// 退出登录（统一清理最新键名）
const logout = () => {
  localStorage.removeItem('token');
  localStorage.removeItem('userPermissions');
  localStorage.removeItem('userInfo');
  router.push('/login');
};

// 去前台
const goFrontend = () => {
  router.push('/');
};

// 当前用户
const getCurrentUser = () => {
  const user = localStorage.getItem('userInfo');
  if (user) {
    currentUser.value = JSON.parse(user);
  }
};

onMounted(() => {
  getCurrentUser();
  const path = route.path;
  const menuKey = path.split('/').pop();
  if (menuKey) {
    selectedKeys.value = [menuKey];
  } else {
    // 根据权限设置默认选中的菜单项
    if (canAccessUserManagement.value) {
      selectedKeys.value = ['users'];
    } else if (PermissionUtil.hasPermission('hotel:manage')) {
      selectedKeys.value = ['hotels'];
    } else if (PermissionUtil.hasPermission('room:search')) {
      selectedKeys.value = ['rooms'];
    } else {
      selectedKeys.value = ['public/profile'];
    }
  }
});
</script>

<style scoped>
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.logo {
  height: 64px;
  background: rgba(255, 255, 255, 0.3);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>